<link type="text/css" rel="stylesheet" href="/js/jqueryui/development-bundle/themes/smoothness/ui.tabs.css" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

        <style type="text/css" media="screen, projection">
            /* Not required for Tabs, just to make this demo look better... */
            body, h1, h2 {
                font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
            }
            h1 {
                margin: 1em 0 1.5em;
                font-size: 18px;
            }
            h2 {
                margin: 2em 0 1.5em;
                font-size: 16px;
            }
            p {
                margin: 0;
            }
            pre, pre+p, p+p {
                margin: 1em 0 0;
            }
            code {
                font-family: "Courier New", Courier, monospace;
            }
        </style>

        <script type="text/javascript">
            $(function() {
                $('#rotate').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
            });
        </script>

        <div id="rotate">
            <ul>
                <li><a href="#fragment-1"><span>Section 1</span></a></li>
                <li><a href="#fragment-2"><span>Section 2</span></a></li>
                <li><a href="#fragment-3"><span>Section 3</span></a></li>

                <li><a href="#fragment-4"><span>Section 4</span></a></li>
                <li><a href="#fragment-5"><span>Section 5</span></a></li>
            </ul>
            <div id="fragment-1">
                Section 1 Text
            </div>
            <div id="fragment-2">
Section 2 Text            </div>

            <div id="fragment-3">
Section 3 Text            </div>
            <div id="fragment-4">
Section 4 Text            </div>
            <div id="fragment-5">
Section 5 Text            </div>
        </div>
